<template>
  <div style="width:100vw;" class="teacher-box">
    <div class="bscroll" ref="bscroll">
      <div class="bscroll-container">
        <div class="teacher-head">
          <div
            :style="`background-image:url(${teachDetail.coursePhoto || require('@/assets/homePicture/teacherDetail.jpg')});`"
            class="teacher-banner"
          >
            <!-- <img src="@/assets/homePicture/banner1.png" alt /> -->
          </div>
          <div class="card">
            <div style="position:relative;">
              <div
                :style="`background-image:url(${teachDetail.photo || require('@/assets/homePicture/06.png')});`"
                class="card-picture"
              >
                <!-- <img src="@/assets/homePicture/userpicture.png" alt /> -->
              </div>
              <div class="card-tip">{{teachDetail.username}}</div>
              <div class="card-itme flex-row">
                <div>
                  <span style="color:#4787e4;font-weight:800;" class="iconfont iconcommpany"></span>
                  <span class="card-title">毕业院校</span>
                </div>
                <div class="card-conten">{{teachDetail.school}}</div>
              </div>
              <div class="card-itme flex-row">
                <div>
                  <span style="color:#4787e4;font-weight:800;" class="iconfont iconweb-icon-"></span>
                  <span class="card-title">工作部门</span>
                </div>
                <div class="card-conten">{{teachDetail.deptName || '外部导师'}}</div>
              </div>
              <div class="card-itme flex-row">
                <div>
                  <span
                    style="color:#4787e4;font-weight:800;"
                    class="iconfont iconhuiyuandengji0101"
                  ></span>
                  <span class="card-title">荣誉称号</span>
                </div>
                <div class="card-conten">{{teachDetail.honorTitle}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="gary-box"></div>
        <div style="padding-bottom:10px;" class="teacher-result">
          <div class="flex-row">
            <span class="tipsicon"></span>
            <span class="tips-text">讲师成就</span>
          </div>
          <div class="result-content">
            <p>{{teachDetail.achievement}}。</p>
          </div>
        </div>
        <div class="teacher-result">
          <div style="margin-bottom:0.4rem;" class="flex-row">
            <span class="tipsicon"></span>
            <span class="tips-text">讲师课程</span>
          </div>
          <div v-for="(item,index) in courseSimpleList" :key="index" class="class-card">
            <div class="card-tip">
              <!-- <span class="class-type">户外</span> -->
              <span>{{item.title}}</span>
            </div>
            <div class="card-time">
              <span>{{item.openTime}}</span>
              <!-- <span>共十三讲</span> -->
            </div>
            <!-- <div class="class-insert">
              <span>内部讲师-内部辅导课程</span>
            </div>-->
            <div class="class-place">
              <span style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></span>
              <span>{{teachDetail.username}} · {{teachDetail.deptName || '外部导师'}}</span>
            </div>
          </div>
          <div @click="seeMoreCourse(teachDetail.id)" class="see-more">
            查看更多
            <span
              style="font-size:14px;position:relative;top:1px;"
              class="iconfont icongengduo"
            ></span>
          </div>
        </div>
        <div class="classics-box">
          <div style="margin-bottom:0.4rem;" class="flex-row">
            <span class="tipsicon"></span>
            <span class="tips-text">精品课程</span>
          </div>
          <div class="classics-content flex-row">
            <div v-for="(item,index) in goodCourseList" :key="index" class="item">
              <Card :teacherArr="teachDetail" :goodCourseList="item"></Card>
            </div>
          </div>
        </div>
        <div @click="seeMoreGoodCourse(teachDetail.id)" class="see-more">
          查看更多
          <span style="font-size:14px;position:relative;top:1px;" class="iconfont icongengduo"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const easydate = require("../../untils/easydate");
import { setText } from "../../untils/ddnavigate";
import BScroll from "better-scroll";
import Card from "@/components/card";
export default {
  components: {
    Card
  },
  data() {
    return {
      teachDetail: {},
      courseSimpleList: [],
      goodCourseList: []
    };
  },
  mounted() {
    let { userId } = this.$route.query;
    let params = {
      id: userId
    };
    this.$get("qryTeaInfoById", params).then(res => {
      if (res.success) {
        this.teachDetail = res.data;
        if (res.data.courseSimpleList) {
          res.data.courseSimpleList.map(function(obj) {
            for (var key in obj) {
              if (key == "openTime") {
                obj[key] = easydate(obj[key]).format("yyyy年-MM月-dd日");
              }
            }
          });
          this.courseSimpleList = res.data.courseSimpleList.splice(0, 1);
          this.goodCourseList = res.data.goodCourseList.splice(0, 2);
        }
      }
    });
    // better-scroll初始化
    this.$nextTick(() => {
      let bscrollDom = this.$refs.bscroll;
      this.aBScroll = new BScroll(bscrollDom, {
        click: true
      });
    });
    setText("讲师详情");
  },
  methods: {
    seeMoreCourse(id){
      this.$router.push({
        path:'/teacherClassList',
        query:{id}
      })
    },
    seeMoreGoodCourse(id){
      this.$router.push({
        path:'/goodCourseForTeacher',
        query:{id}
      })
    },
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/teacher-detail.less");
.see-more {
  padding: 10px 0;
  text-align: center;
  border-top: 0.5px solid #eeeeee;
  background-color: #ffffff;
}
.teacher-box .teacher-result,.teacher-box .classics-box {
  padding-bottom: 0;
}
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
.classics-content {
  flex-wrap: wrap;
}
</style>